<!-- 供应商服务列表 -->
<template>
  <div class="base-info">
    <a-button type="primary" @click="addServiceData">新增服务内容</a-button>
    <tableTurn
      style="margin-top: 20px"
      :tableData="getServiceList"
      :args="args"
      ref="tableTurnRef"
    >
      <a-table-column :width="80" align="center">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column
        title="服务名称"
        dataIndex="name"
        align="center"
        :width="200"
      >
      </a-table-column>
      <a-table-column
        title="内容描述"
        dataIndex="des"
        align="center"
        :width="200"
      >
      </a-table-column>

      <!-- 操作item -->
      <a-table-column align="center" :width="300" fixed="right" title="操作">
        <template #cell="{ record }">
          <a-button type="text" @click="goEdit(record)">编辑</a-button>
          <a-button type="text" @click="goDelete(record.id)">删除</a-button>
        </template>
      </a-table-column>
    </tableTurn>
    <addService
      v-model:visible="modelVisible"
      :title="title"
      @addServicelist="addServicelist"
      :ServiceData="EditService"
    >
    </addService>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { useRoute } from 'vue-router';
  import {
    GetArchivesDetaliType,
    postSupplierServer,
    putSupplierServer,
    delSupplierServer,
  } from '@/api/buy-management/archives-details/index';
  import addService from './add-service/index.vue';

  const route = useRoute();
  const tableTurnRef = ref();
  const modelVisible = ref(false);
  const title = ref();
  const args = {
    pagination: false,
  };
  const getServiceList = async () => {
    try {
      const res = await GetArchivesDetaliType({
        id: Math.floor(route.query.id),
        typeId: 5,
      });
      return Promise.resolve(res);
    } catch (err: unknown) {
      console.log(err);
    }
  };
  getServiceList();

  const addServiceData = () => {
    title.value = '新增服务内容';
    modelVisible.value = true;
  };

  const addServicelist = async (form, key) => {
    if (key === 'add') {
      const res = await postSupplierServer({
        supplierId: Math.floor(route.query.id),
        name: form.name,
        des: form.des,
      });
    } else {
      const res = await putSupplierServer({
        id: form.id,
        supplierId: Math.floor(route.query.id),
        name: form.name,
        des: form.des,
      });
    }
    tableTurnRef.value.loadData();
  };

  const EditService = ref({
    name: '',
    des: '',
  });
  const goEdit = (val) => {
    title.value = '编辑服务内容';
    EditService.value = val;
    modelVisible.value = true;
  };

  const goDelete = async (id) => {
    const res = await delSupplierServer({ id });
    tableTurnRef.value.loadData();
  };
</script>

<style scoped lang="less">
  .base-info {
    padding: 0 40px;
  }
</style>
